Web Page के Element को Design करने के लिए हम CSS के इस Color Properties का इस्तेमाल करते हे | और इस Color Properties को हम Web Page के Background के अन्दर भी Set कर सकते हे |
तो आइये जानते हे ये Color Properties क्या होता हे ? और Web page को Design करने के लिए कितने Types के Color Properties का इस्तेमाल करते हे ,
चलिए आज की इस (What are the CSS Color Properties in Hindi) आर्टिकल को शुरू करते हे ,,,
What are the CSS Color Properties in Hindi
Web Page को अछे से Design करने के लिए हम CSS के इस Color Properties का इस्तेमाल करते हे | इस Color Properties के मदत से हम Web Page में Text, font , Border को भी Color से Design कर सकते हे | यह तक जो Color हम Web page में Background के अन्दर Set करते हे उसपे भी इसी Color Properties का इस्तेमाल किया जाता हे |मतलब इस Color Properties का इस्तेमाल करके आप किसी भी HTML Element को Color से Design कर सकते हे |
Different Types of Color Value : -
Web Page में Color को Declare करने के लिए बहत अलग अलग तरीके इस्तेमाल किये जाते हे , जिसकी मदत से HTML Element को Color से Design किये जाते हे | जेइसे -
चलिए इसे एक Example के मदत से समझाने की कौसिस करते हे ,
Example : -
<html>
<head>
<title>Background color Properties</title>
<style>
body{
color: rgb(180,55,90);
}
</style>
</head>
<body>
<h1>Hello, This RGB color </h1>
</body>
</html>
- RGB Value
- Hex Value
- HSL Value
- Color Name
1. RGB value :-
RGB तिन तरह के Color का Combination होता हे , (Red , Green , Blue) | जब HTML Element में RGB Color को Declare किये जाते हे , मतलब उसमे इसी RGB Value को Add किया गया हे | RGB में 0 से लेकर 255 के बिच में आप किसि भी Color की Value को Set कर सकते हो ,चलिए इसे एक Example के मदत से समझाने की कौसिस करते हे ,
Example : -
<html>
<head>
<title>Background color Properties</title>
<style>
body{
color: rgb(180,55,90);
}
</style>
</head>
<body>
<h1>Hello, This RGB color </h1>
</body>
</html>
Output :
.webp "What are the CSS Color Properties in Hindi")
तो कुछ इसी तरह से RGB Color Value का इस्तेमाल करके हम HTML Element को Color से Design कर सकते हे |
2. Hex Value : -
Hex Value का मतलब Hexadecimal Value होता हे , और इस इस Hex Code के अन्दर 6 नंबर के Code होते हे , जेइसे - (#000000 ) जिसमे Red Green और Blue Color का Combination होता हे | इस Hex Value के अन्दर सिर्फ नंबर ही नही बल्कि इसमें आप Alphabetic Number भी Add कर सकते हो , जेइसे - (# ff7480) , जिसमे आप Capital Letter या फिर Small Letter भी इस्तेमाल कर सकते हो | लेकिन जादातर इस Code को Apply करने के लिए हम Small Letter का ही इस्तेमाल करते हे |आइये देखते हे इस Hex Value को किसे Apply करके Color को Set किया जाता हे |
Example : -
<html>
<head>
<title>Background color Properties</title>
<style>
body{
color:#a11c04 ;
}
</style>
</head>
<body>
<h1>Hello, This is Hexadecimal color </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :
.webp "What are the CSS Color Properties in Hindi")
3. HSL Value :-
HSL का मतलब हे Hue Saturation Lightness | ( आइये इसे एक एक करके समझते हे )- Hue :- Hue का इस्तेमाल करके Color में Degree को Represent किया जाता हे , जेइसे 0 to 360 | और इस Degree नंबर को Red ,Green और Blue Color में Divide किया गया हे , (0+120+240 ) मतलब - 0 Red Color को Represent करता हे , 120 Green को और 240 Blue Color को Represent करता हे |
- Saturation : - Saturation के मदत से Color की Value को Define किया जाता हे | मतलब अगर Color 100% को Represent करता हे , तो वो Color Fully Saturation होगा | जिसमे 50% Gray Color होगा , जो Result में दिखाई भी देगा | और अगर वो Percentage 0% हुए तो वो Fully Un-Saturation होगा , और उसमे पूरी तरह से Gray Color ही रहेगा | लेकिन वो Color Web Page में दिखेगा नही |
- Lightness :- Lightness में Color की Light को Represent करता हे , और इसमें भी 100% में Color को Divide किया गया हे | जिसमे 0 % Black Color को Represent करता हे , 50% में Black और Dark Black का Combination होता हे , (मतलब जादा Dark भी नही और जादा Light भी नही ) और 100% Color में White Color को Represent किया जाता हे , जो की पूरी तरह से Lightness होता हे |
तो येही होता हे HSL का बेसिक सा Concept , उम्मीद हे आप लोग इस Concept को समझ गये होंगे ,
चलिए इस HSL Color को Practical में Apply करके देखते हे ,
Example : -
<html>
<head>
<title>Background color Properties</title>
<style>
body{
color:hsl(122, 96%, 33%);
}
</style>
</head>
<body>
<h1>Hello, This is HSL color </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :-
.webp "What are the CSS Color Properties in Hindi")
4. Color Name :-
Web Page में Color Value को Color Name से भी Represent किया जाता हे जेइसे - Red ,Yellow ,White ,Black, Pink, Brown इत्यादि ,आप चाहो तो HTML Element को किसी भी नाम के Color से Design कर सकते हो , लेकिन सभी Color Browser में Support नही करते , और इस बजह से जदातर लोग HTML Element में Color Name का इस्तेमाल नही करते , क्यू की सभी Color के Name को याद रखना भी सम्भब नही हे | और इसलिए जादातर Hex Value , RGB Value या फिर HSL Value को ही HTML Element में Add किया जाता हे |
लेकिन आप चाहो तो Color Name से भी Web Page में Color को Set कर सकते हो |
आइये एक Example करके देखते हे ,
Example :
<html>
<head>
<title>Background color Properties</title>
<style>
body{
color:blue
}
</style>
</head>
<body>
<h1>Hello, This is blue color </h1>
<p>This is Paragraph</p>
</body>
</html>
Output :
.webp "What are the CSS Color Properties in Hindi")
Note:
किसी भी Color की Hex Value या RGB Value आपको गूगल से आसानी से मिल जायेंगे , या फिर Photoshop, MS Paint के मदत से आप खुद ही Color की Hex Value और RGB Value को Create कर सकते हो |
हमने निचे कुछ Color की Hex Value शेयर की , जो Normally इस्तेमाल किये जाते हे ,
जिससे आपको काफी मदत मिलेगी ,
1. Black - #000000
2. Blue - #0000ff
3. Brown - #a52a2a
4. Blue violet - #deb887
5. Aqua - #00ffff
6. Dark blue - #00008b
7. Gray - #808080
8. Green - #008000
9. Khaki - #foe686
10. Orange - #ffa500
11. Orange red - #ff4500
12. Pink - #ffcocb
13. Purple - #800080
14. Red- #ff0000
15. White- #ffffff
16. Yellow - #ffff00
17. Violet - #ee82ee
18. Sky blue - #87ceeb
19. Vavvy- #000080
20. Maroon - #800000
Related Post :
.webp)
.webp)
.webp)
.webp)
.webp)
